import React, { useState,useEffect } from 'react';
import {
    Modal,
    Button, Form, Input, InputNumber, Select, Switch, DatePicker
} from 'antd';
import dayjs from "dayjs"

interface DataType {
    key?: React.Key; //序号
    id:number;//id
    title: string; //促销标题name
    detial: string; //促销详情detail
    type: string; //使用行程address
    state: number //以未上架判断 isPut
    creat: string//添加时间 time
}
interface PropsType {
    isModalOpen: boolean,
    closeCom(): void,//取消弹框事件
    edit:DataType | undefined
}
function Compile(props: PropsType) {
    const [form] = Form.useForm();
    const { RangePicker } = DatePicker;
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const config = {
    rules: [{ type: 'object' as const, required: true, message: 'Please select time!' }],
    };
    
    /* eslint-disable no-template-curly-in-string */
    const validateMessages = {
        required: '${label} is required!',
        types: {
            email: '${label} is not a valid email!',
            number: '${label} is not a valid number!',
        },
        number: {
            range: '${label} must be between ${min} and ${max}',
        },
    };
    /* eslint-enable no-template-curly-in-string */

    const onFinish = (values: any) => {
        console.log(values);
    };
    //点击取消退出弹框
    const cancelBtn = () => {
        // console.log('点击了取消按钮');
        props.closeCom()
    }
    useEffect(()=>{
        form.setFieldsValue({
            title: props.edit?.title,
            detail: props.edit?.detial,
            type: props.edit?.type,
            state : props.edit?.state,
            creat : dayjs( props.edit?.creat),
        })
        console.log('子组件接收到的父组件参数',props.edit);
    },[props])
    return (
        <div>
            {/* onOk={handleOk} onCancel={handleCancel} */}
            <Modal title="编辑" centered={true} open={props.isModalOpen} footer={null} onCancel={props.closeCom}>
                <Form
                    {...layout}
                    name="nest-messages"
                    onFinish={onFinish}
                    initialValues={{ remember: true }}
                    style={{ maxWidth: 600 }}
                    validateMessages={validateMessages}
                    form={form}
                >
                    <Form.Item name='title' label="促销标题" rules={[{ required: true }]} initialValue={props.edit?.title}>
                        <Input/>
                    </Form.Item>
                    <Form.Item name='detial' label="促销详情" initialValue={props.edit?.detial}>
                        <Input.TextArea/>
                    </Form.Item>
                    <Form.Item label="使用行程" name="type" initialValue={props.edit?.type}>
                        <Select>
                            <Select.Option value="登山">登山</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="是否上架" valuePropName="state" name="isPut" initialValue={props.edit?.state}>
                        <Switch/>
                    </Form.Item>
                    <Form.Item name="creat" label="上架日期" {...config} initialValue={props.edit?.creat}>
                        <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"/>
                    </Form.Item>
                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                        <Button type="primary" htmlType="submit" style={{marginRight:'20px'}}>
                            确认
                        </Button>
                        <Button htmlType="button" onClick={cancelBtn}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
export default Compile